<template>
  <div ref="chart"  :style="chartStyle">
  </div>
</template>

<script>
import echarts from 'echarts';

require('echarts-liquidfill');

export default {
  name: 'piesix',
  props: {
    config: {
      required: true,
    },
    chartStyle: {
      require: false,
      type: Object,
      default: () => ({
        height: '100%',
        position: 'absolute',
        width: '100%',
        top: '0px',
        bottom: '0px',
        left: '0px',
      }),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {

  },
  mounted() {
    this.renderChart();
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    renderChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart, this.config.theme);
      }
      const option = this.makeOptions(this.config, this.chartData);
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 100);
    },
    makeOptions() {
      const img = '';
      const trafficWay = [{
        name: '优秀学生',
        value: 20,
      }, {
        name: '获得荣誉',
        value: 10,
      }, {
        name: '论文著作',
        value: 30,
      }];

      const data = [];
      const color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
      for (let i = 0; i < trafficWay.length; i += 1) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
            },
          },
        });
      }
      const seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter(params) {
                let percent = 0;
                let total = 0;
                for (let i = 0; i < trafficWay.length; i += 1) {
                  total += trafficWay[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== '') {
                  return `${params.name}\n\n占百分比：${percent}%`;
                }
                return '';
              },
            },
            labelLine: {
              length: 30,
              length2: 100,
              show: true,
              color: '#00ffff',
            },
          },
        },
        data,
      }];
      const option = {
        // backgroundColor: '#0A2E5D',
        color,
        title: {
          text: '广州市天河区教学成果分析',
          top: '48%',
          textAlign: 'center',
          left: '49%',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: '400',
          },
        },
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 178,
              height: 178,
            },
            left: 'center',
            top: 'center',
            position: [100, 100],
          }],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: 'circle',
          orient: 'horizontal',
          // x: 'left',
          data: ['优秀学生', '获得荣誉', '论文著作'],
          right: 250,
          bottom: 100,
          align: 'right',
          textStyle: {
            color: '#fff',
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      return option;
    },
  },
  watch: {
    config: {
      deep: true,
      handler() {
        if (this.config.needResize) {
          this.config.needResize = false;
          this.handleResize();
        }
      },
    },
  },
};
</script>

<style scoped lang="stylus">

</style>
